<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3指令</title>
  <style>
    .comp-container {
      position: absulute;
    }
  </style>
</head>
<body>
  <!--
    知识点：
    1. 指令的定义分为全局指令和局部指令
    2. 指令包含的生命周期
    3. 当mounted和updated生命周期相同时可以将定义的后一个参数写成函数形式
    4. 指令的 (el, binding, vnode), el是指令操作的dom元素，binding还包括 binding.value, binding.arg, binding.modifiers    
  -->
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>    
    const app = Vue.createApp({
      template: `
        <comp />
      `
    })

    app.component('Comp', {
      data() {
        return {
          direction: 'top',
          distance: 0
        }
      },
      template: `
        <div class="comp-container" v-pos:[direction]="distance">
          <input type="text" v-model.number="distance" />
        </div>
      `
    })
    app.directive('pos', {
      beforeMount() {
        console.log('beforeMount')
      },
      mounted(el, binding, vnode) {
        console.log('mounted生命周期', el, binding, vnode)
      },
      beforeUpdate() {
        console.log('beforeUpdate')
      },
      updated() {
        console.log('updated')
      },
      beforeUnmount() {
        console.log('beforeUnmount')
      },
      unmounted() {
        console.log('unmounted')
      }
    })

    app.mount('#app')
  </script>
</body>
</html>